
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Slider: Creating a Slider from Existing Markup</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
    #demo {
        background: #fff;
        border: 1px solid #999;
        color: #000;
    }

    #demo .demo-content {
        padding: 1ex 1em;
    }

    #volume_control {
        height: 25px;
        line-height: 25px;
        background: url("assets/images/sprite.png") repeat-x 0 0;
        position: relative;
    }

    #volume_control label {
        font-weight: bold;
        margin: 0 1ex 0 1em;
        zoom: 1;
    }

    #volume {
        border: 1px inset #999;
        height: 16px;
        margin-top: 3px;
        padding: 0 3px;
        text-align: right;
        width: 2em;
    }

    /* Support open/close action for the slider */
    #demo .volume-hide #volume_slider {
        display: none;
    }

    #volume_icon {
        background: url("assets/images/sprite.png") no-repeat 0 -25px;
        border: 0 none;
        height: 25px;
        vertical-align: top;
        width: 31px;
    }

    /* move the button text offscreen left */
    #volume_icon p {
        text-indent: -9999px;
    }

    /*
     * adjust the speaker icon sprite in accordance with volume level and
     * active state
    */
    #demo .volume-hide .level_0 { background-position: 0 -25px; }
    #demo .volume-hide .level_1 { background-position: 0 -50px; }
    #demo .volume-hide .level_2 { background-position: 0 -75px; }
    #demo .volume-hide .level_3 { background-position: 0 -100px; }

    #demo .level_0,
    #demo .level_0:hover {
        background-position: 0 -125px;
    }
    #demo .level_1,
    #demo .level_1:hover {
        background-position: 0 -150px;
    }
    #demo .level_2,
    #demo .level_2:hover {
        background-position: 0 -175px;
    }
    #demo .level_3,
    #demo .level_3:hover {
        background-position: 0 -200px;
    }

    #volume_slider {
        position: absolute;
        top: 25px;
    }

    /* rail image on the containing box rather than the rail element */
    #volume_slider {
        background: url("assets/images/sprite.png") no-repeat 0 -259px;
        height: 116px;
        width: 31px;
        padding-top: 9px;
        cursor: arrow;
    }

    #volume_slider .yui3-slider-rail {
        background-image: none;
        width: 31px;
    }

    #volume_slider .yui3-slider-thumb {
        height: 17px;
        width: 31px;
        overflow: hidden;
    }

    #volume_slider .yui3-slider-thumb img {
        position: absolute;
        top: -225px;
    }

    #volume_slider .yui3-slider-disabled .yui3-slider-thumb img {
        top: -242px;
    }

    #demo_sprite {
        display: inline;
        float: left;
        margin-right: 1em;
    }
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Slider: Creating a Slider from Existing Markup</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Slider: Creating a Slider from Existing Markup</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example illustrates a few points:</p>
<ol>
    <li>How to create a Slider using existing markup</li>
    <li>How to disable a Slider</li>
    <li>How to use an image sprite to create a custom Slider skin</li>
</ol>

<p>The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration.  <strong>Click on the speaker icon to show the Slider</strong>.</p>
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="slider_from_markup_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="demo">

    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <span id="volume_slider">
            <span class="yui3-slider-rail">
                <span class="yui3-slider-thumb"><img src="assets/images/sprite.png" height="384" width="31"></span>
            </span>
        </span>
        <label for="mute"><input type="checkbox" id="mute"> mute</label>
    </div>

    <div class="demo-content">
        <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>
        <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>
    </div>
</div>
<script type="text/javascript">
YUI({ filter: 'raw' }).use("slider", function (Y) {

var control    = Y.one('#volume_control'),
    volInput   = Y.one('#volume'),
    icon       = Y.one('#volume_icon'),
    mute       = Y.one('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    wait,
    volume;

Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

volume = new Y.Slider({
    axis  : 'y',
    min   : 100,
    max   : 0,
    value : 50,
    length: '105px'
});

volume.renderRail = function () {
    return Y.one( "#volume_slider span.yui3-slider-rail" );
};
volume.renderThumb = function () {
    return this.rail.one( "span.yui3-slider-thumb" );
};

volume.render( "#volume_slider" );

// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);

mute.on('click', muteVolume);

volInput.on({
    keydown : handleInput,
    keyup   : updateVolume
});

icon.on('click', showHideSlider);

Y.one( 'doc' ).on('click', handleDocumentClick );

// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}

function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        volInput.set('disabled','disabled');
    } else {
        volume.setValue(beforeMute);
        volInput.set('disabled','');
    }
}

function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }
}

function updateVolume(e) {
    // delay input processing to give the user time to type
    if (wait) {
        wait.cancel();
    }

    wait = Y.later(400, null, function () {
        var value = parseInt(volInput.get('value'),10) || 0;

        if (value > 100) {
            volInput.set('value', 100);
            value = 100
        }

        volume.setValue( value );
    });
}

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (e) {
        e.preventDefault();
    }
}

function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3 id="prog_enh">Progressive Enhancement</h3>
<p>The <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive enhancement</a> strategy recommends that your page not contain markup that will only be useful in cases where JavaScript is available.  For this reason, Slider does not include an <code>HTML_PARSER</code> to reuse existing markup.  However, it is possible to override a couple methods to accomplish the task.</p>

<p>The starting markup for the volume control area is as follows:</p>

<div id="syntax-d74a5fedf143c6d6ea07e7c4cfe9e63a" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_control&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;volume-hide&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span>&gt;</span>volume<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;50&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_icon&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;level_2&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;Open volume slider&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>Open<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_slider&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-rail&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-thumb&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/images/sprite.png&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;384&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;31&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;checkbox&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;</span> mute<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_control&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;volume-hide&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span>&gt;</span>volume<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;50&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_icon&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;level_2&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;Open volume slider&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>Open<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_slider&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-rail&quot;</span>&gt;</span>
            <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-thumb&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/images/sprite.png&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;384&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;31&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;checkbox&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;</span> mute<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-d74a5fedf143c6d6ea07e7c4cfe9e63a-plain"><div id="volume_control" class="volume-hide">
    <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
    <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>

    <span id="volume_slider">
        <span class="yui3-slider-rail">
            <span class="yui3-slider-thumb"><img src="assets/images/sprite.png" height="384" width="31"></span>
        </span>
    </span>

    <label for="mute"><input type="checkbox" id="mute"> mute</label>
</div></textarea></div>
<p>To tell the Slider to use the existing rail and thumb elements, override the <code>renderRail</code> and <code>renderThumb</code> methods.</p>

<div id="syntax-c2226683dbc7fadf75324324b99a6488" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> volume <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    axis  <span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    min   <span class="sy0">:</span> <span class="nu0">100</span><span class="sy0">,</span> <span class="co1">// reverse min and max to make the top</span></div></li><li class="li1"><div class="de1">    max   <span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>   <span class="co1">// equal 100 and the bottom 0</span></div></li><li class="li2"><div class="de2">    value <span class="sy0">:</span> <span class="nu0">50</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    length<span class="sy0">:</span> <span class="st0">'105px'</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Override renderRail to just return the existing rail node</span></div></li><li class="li2"><div class="de2">volume.<span class="me1">renderRail</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider span.yui3-slider-rail&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="co1">// Override renderThumb to just return the existing thumb node</span></div></li><li class="li1"><div class="de1">volume.<span class="me1">renderThumb</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">rail</span>.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;span.yui3-slider-thumb&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">volume.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> volume <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    axis  <span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span>
    min   <span class="sy0">:</span> <span class="nu0">100</span><span class="sy0">,</span> <span class="co1">// reverse min and max to make the top</span>
    max   <span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>   <span class="co1">// equal 100 and the bottom 0</span>
    value <span class="sy0">:</span> <span class="nu0">50</span><span class="sy0">,</span>
    length<span class="sy0">:</span> <span class="st0">'105px'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Override renderRail to just return the existing rail node</span>
volume.<span class="me1">renderRail</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider span.yui3-slider-rail&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
<span class="co1">// Override renderThumb to just return the existing thumb node</span>
volume.<span class="me1">renderThumb</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">rail</span>.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;span.yui3-slider-thumb&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
volume.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-c2226683dbc7fadf75324324b99a6488-plain">var volume = new Y.Slider({
    axis  : 'y',
    min   : 100, // reverse min and max to make the top
    max   : 0,   // equal 100 and the bottom 0
    value : 50,
    length: '105px'
});

// Override renderRail to just return the existing rail node
volume.renderRail = function () {
    return Y.one( "#volume_slider span.yui3-slider-rail" );
};
// Override renderThumb to just return the existing thumb node
volume.renderThumb = function () {
    return this.rail.one( "span.yui3-slider-thumb" );
};

volume.render( "#volume_slider" );</textarea></div>
<h3 id="syncui">Hide and show the Slider</h3>
<p>By default, we want the Slider to be hidden until the user clicks on the speaker icon.  However, we want to support muting or changing the value of the Slider while it is hidden.</p>

<div id="syntax-67953aedf5e00c2b91edcddf9716f4ad" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> control <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_control'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    icon    <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_icon'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    <span class="kw3">open</span>    <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="kw2">function</span> showHideSlider<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    control.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'volume-hide'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">open</span> <span class="sy0">=</span> <span class="sy0">!</span><span class="kw3">open</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">icon.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> showHideSlider<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Also support hiding the Slider when the user clicks outside the</span></div></li><li class="li1"><div class="de1"><span class="co1">// Slider element.</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> handleDocumentClick<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">open</span> <span class="sy0">&amp;&amp;</span> <span class="sy0">!</span>icon.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span></div></li><li class="li2"><div class="de2">            <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        showHideSlider<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">'doc'</span> <span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> handleDocumentClick <span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> control <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_control'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    icon    <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_icon'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    <span class="kw3">open</span>    <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> showHideSlider<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    control.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'volume-hide'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw3">open</span> <span class="sy0">=</span> <span class="sy0">!</span><span class="kw3">open</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
icon.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> showHideSlider<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Also support hiding the Slider when the user clicks outside the</span>
<span class="co1">// Slider element.</span>
<span class="kw2">function</span> handleDocumentClick<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">open</span> <span class="sy0">&amp;&amp;</span> <span class="sy0">!</span>icon.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span>
            <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        showHideSlider<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">'doc'</span> <span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> handleDocumentClick <span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-67953aedf5e00c2b91edcddf9716f4ad-plain">var control = Y.one('#volume_control'),
    icon    = Y.one('#volume_icon'),
    open    = false;

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (e) {
        e.preventDefault();
    }
}

icon.on('click', showHideSlider);

// Also support hiding the Slider when the user clicks outside the
// Slider element.
function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

Y.one( 'doc' ).on('click', handleDocumentClick );</textarea></div>
<h3 id="demo_mute">Mute and unmute</h3>
<p>We want to disable the Slider and input and set the value to 0 if a user checks the mute checkbox.  The value should be returned to the last assigned value when unmuted.  To disable the Slider, set its <code>disabled</code> attribute to <code>true</code>.</p>

<div id="syntax-f9d256d490ac36d945c2bfd0fde7456b" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> volInput   <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    mute       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#mute'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    beforeMute <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="kw2">function</span> muteVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// Set disabled to false if currently true; true if currently false</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> disabled <span class="sy0">=</span> <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    volume.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span> disabled<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="kw1">if</span> <span class="br0">&#40;</span>disabled<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        beforeMute <span class="sy0">=</span> volume.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        volume.<span class="me1">setValue</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        volume.<span class="me1">setValue</span><span class="br0">&#40;</span>beforeMute<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">mute.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> muteVolume<span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> volInput   <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    mute       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#mute'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    beforeMute <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> muteVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Set disabled to false if currently true; true if currently false</span>
    <span class="kw2">var</span> disabled <span class="sy0">=</span> <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    volume.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span> disabled<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>disabled<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        beforeMute <span class="sy0">=</span> volume.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        volume.<span class="me1">setValue</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
        volume.<span class="me1">setValue</span><span class="br0">&#40;</span>beforeMute<span class="br0">&#41;</span><span class="sy0">;</span>
        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
mute.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> muteVolume<span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-f9d256d490ac36d945c2bfd0fde7456b-plain">var volInput   = Y.one('#volume'),
    mute       = Y.one('#mute'),
    beforeMute = 0;

function muteVolume(e) {
    // Set disabled to false if currently true; true if currently false
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        volInput.set('disabled','disabled');
    } else {
        volume.setValue(beforeMute);
        volInput.set('disabled','');
    }
}

mute.on('click', muteVolume);</textarea></div>
<h3>Skinning and CSS</h3>
<img id="demo_sprite" src="assets/images/sprite.png" height="384" width="31" alt="Sprite of all custom image resources for this example">
<p>We'll be using the image sprite to the left to create a custom skin.  In this design, to keep things simple, the Slider's container and end caps are all rendered together at the bottom of the sprite.</p>

<p>Slider's thumb range is constrained by the rail element, so it wouldn't be appropriate to use this image as the rail's background&#8212;the thumb would slide off the ends.  Instead, the rail image is assigned as the background to the Slider's containing element <code>#volume_slider</code>.  Then the default skin background image is removed on the rail.</p>

<div id="syntax-a870d8d4b52f903348456d40b915b70d" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* rail image on the containing box rather than the rail element */</span></div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-259px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">116px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">9px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-rail</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">background-image</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">17px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-225px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-disabled</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-242px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* rail image on the containing box rather than the rail element */</span>
<span class="re0">#volume_slider</span> <span class="br0">&#123;</span>
    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-259px</span><span class="sy0">;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">116px</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
    <span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">9px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-rail</span> <span class="br0">&#123;</span>
    <span class="kw1">background-image</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> <span class="br0">&#123;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">17px</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
    <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-225px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-disabled</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-242px</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-a870d8d4b52f903348456d40b915b70d-plain">/* rail image on the containing box rather than the rail element */
#volume_slider {
    background: url("assets/images/sprite.png") no-repeat 0 -259px;
    height: 116px;
    width: 31px;
    padding-top: 9px;
}

#volume_slider .yui3-slider-rail {
    background-image: none;
    width: 31px;
}

#volume_slider .yui3-slider-thumb {
    height: 17px;
    width: 31px;
    overflow: hidden;
}

#volume_slider .yui3-slider-thumb img {
    position: absolute;
    top: -225px;
}

#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {
    top: -242px;
}</textarea></div>
<p>You can see the full CSS and JavaScript for the other controls in the <a href="#full_code_listing">Full Code Listing</a> below.</p>


<h3 id="full_code_listing">Full Code Listing</h3>
<p>Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls, and CSS for placing the Slider and setting up the volume icon sprite positioning.</p>

<h4>Markup</h4>
<div id="syntax-676be0a3a136fa5d4a008d4e0f2bbec0" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_control&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;volume-hide&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span>&gt;</span>volume<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;50&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_icon&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;level_2&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;Open volume slider&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>Open<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_slider&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-rail&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">                <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-thumb&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/images/sprite.png&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;384&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;31&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;checkbox&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;</span> mute<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;demo-content&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_control&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;volume-hide&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span>&gt;</span>volume<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">&quot;3&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;50&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_icon&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;level_2&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;Open volume slider&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>Open<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;volume_slider&quot;</span>&gt;</span>
            <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-rail&quot;</span>&gt;</span>
                <span class="sc2">&lt;<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-slider-thumb&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/images/sprite.png&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;384&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;31&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">span</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;checkbox&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;mute&quot;</span>&gt;</span> mute<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;demo-content&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-676be0a3a136fa5d4a008d4e0f2bbec0-plain"><div id="demo">

    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <span id="volume_slider">
            <span class="yui3-slider-rail">
                <span class="yui3-slider-thumb"><img src="assets/images/sprite.png" height="384" width="31"></span>
            </span>
        </span>
        <label for="mute"><input type="checkbox" id="mute"> mute</label>
    </div>

    <div class="demo-content">
        <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>
        <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>
    </div>
</div></textarea></div>
<h4 id="full_js">JavaScript</h4>
<div id="syntax-38fe596180886822bfac1eb600ac6a99" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;slider&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">var</span> control    <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_control'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    volInput   <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    icon       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_icon'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    mute       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#mute'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    <span class="kw3">open</span>       <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    level      <span class="sy0">=</span> <span class="nu0">2</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    beforeMute <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    wait<span class="sy0">,</span></div></li><li class="li1"><div class="de1">    volume<span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// The style.top is known because of a fixed height control bar, but the</span></div></li><li class="li1"><div class="de1"><span class="co1">// style.left remains unknown until run time.</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#volume_slider&quot;</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'left'</span><span class="sy0">,</span>icon.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetLeft'</span><span class="br0">&#41;</span><span class="sy0">+</span><span class="st0">'px'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">volume <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    axis  <span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    min   <span class="sy0">:</span> <span class="nu0">100</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    max   <span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    value <span class="sy0">:</span> <span class="nu0">50</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    length<span class="sy0">:</span> <span class="st0">'105px'</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">volume.<span class="me1">renderRail</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider span.yui3-slider-rail&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">volume.<span class="me1">renderThumb</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">rail</span>.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;span.yui3-slider-thumb&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">volume.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Initialize event listeners</span></div></li><li class="li2"><div class="de2">volume.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'valueChange'</span><span class="sy0">,</span> updateInput<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">volume.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'valueChange'</span><span class="sy0">,</span> updateIcon<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">mute.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> muteVolume<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">volInput.<span class="me1">on</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    keydown <span class="sy0">:</span> handleInput<span class="sy0">,</span></div></li><li class="li1"><div class="de1">    keyup   <span class="sy0">:</span> updateVolume</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">icon.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> showHideSlider<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">'doc'</span> <span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> handleDocumentClick <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Support functions</span></div></li><li class="li2"><div class="de2"><span class="kw2">function</span> updateInput<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">!==</span> <span class="st0">'KEY'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="sy0">,</span>e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> updateIcon<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> newLevel <span class="sy0">=</span> e.<span class="me1">newVal</span> <span class="sy0">&amp;&amp;</span> Math.<span class="me1">ceil</span><span class="br0">&#40;</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">34</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>level <span class="sy0">!==</span> newLevel<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        icon.<span class="me1">replaceClass</span><span class="br0">&#40;</span><span class="st0">'level_'</span><span class="sy0">+</span>level<span class="sy0">,</span> <span class="st0">'level_'</span><span class="sy0">+</span>newLevel<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        level <span class="sy0">=</span> newLevel<span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="kw2">function</span> muteVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> disabled <span class="sy0">=</span> <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    volume.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span> disabled<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>disabled<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        beforeMute <span class="sy0">=</span> volume.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        volume.<span class="me1">setValue</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        volume.<span class="me1">setValue</span><span class="br0">&#40;</span>beforeMute<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> handleInput<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="co1">// Allow only numbers and various other control keys</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">keyCode</span> <span class="sy0">&gt;</span> <span class="nu0">57</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">halt</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> updateVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// delay input processing to give the user time to type</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>wait<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        wait.<span class="me1">cancel</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    wait <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">400</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> value <span class="sy0">=</span> parseInt<span class="br0">&#40;</span>volInput.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span><span class="nu0">10</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        <span class="kw1">if</span> <span class="br0">&#40;</span>value <span class="sy0">&gt;</span> <span class="nu0">100</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="sy0">,</span> <span class="nu0">100</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            value <span class="sy0">=</span> <span class="nu0">100</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        volume.<span class="me1">setValue</span><span class="br0">&#40;</span> value <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> showHideSlider<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    control.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'volume-hide'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">open</span> <span class="sy0">=</span> <span class="sy0">!</span><span class="kw3">open</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> handleDocumentClick<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">open</span> <span class="sy0">&amp;&amp;</span> <span class="sy0">!</span>icon.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span></div></li><li class="li2"><div class="de2">            <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        showHideSlider<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;slider&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
<span class="kw2">var</span> control    <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_control'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    volInput   <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    icon       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#volume_icon'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    mute       <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#mute'</span><span class="br0">&#41;</span><span class="sy0">,</span>
    <span class="kw3">open</span>       <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
    level      <span class="sy0">=</span> <span class="nu0">2</span><span class="sy0">,</span>
    beforeMute <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span>
    wait<span class="sy0">,</span>
    volume<span class="sy0">;</span>
&nbsp;
<span class="co1">// The style.top is known because of a fixed height control bar, but the</span>
<span class="co1">// style.left remains unknown until run time.</span>
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#volume_slider&quot;</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'left'</span><span class="sy0">,</span>icon.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetLeft'</span><span class="br0">&#41;</span><span class="sy0">+</span><span class="st0">'px'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
volume <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    axis  <span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span>
    min   <span class="sy0">:</span> <span class="nu0">100</span><span class="sy0">,</span>
    max   <span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
    value <span class="sy0">:</span> <span class="nu0">50</span><span class="sy0">,</span>
    length<span class="sy0">:</span> <span class="st0">'105px'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
volume.<span class="me1">renderRail</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider span.yui3-slider-rail&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
volume.<span class="me1">renderThumb</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">rail</span>.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">&quot;span.yui3-slider-thumb&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
volume.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#volume_slider&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Initialize event listeners</span>
volume.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'valueChange'</span><span class="sy0">,</span> updateInput<span class="br0">&#41;</span><span class="sy0">;</span>
volume.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'valueChange'</span><span class="sy0">,</span> updateIcon<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
mute.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> muteVolume<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
volInput.<span class="me1">on</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    keydown <span class="sy0">:</span> handleInput<span class="sy0">,</span>
    keyup   <span class="sy0">:</span> updateVolume
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
icon.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> showHideSlider<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">one</span><span class="br0">&#40;</span> <span class="st0">'doc'</span> <span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> handleDocumentClick <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Support functions</span>
<span class="kw2">function</span> updateInput<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">!==</span> <span class="st0">'KEY'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="sy0">,</span>e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> updateIcon<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> newLevel <span class="sy0">=</span> e.<span class="me1">newVal</span> <span class="sy0">&amp;&amp;</span> Math.<span class="me1">ceil</span><span class="br0">&#40;</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">34</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>level <span class="sy0">!==</span> newLevel<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        icon.<span class="me1">replaceClass</span><span class="br0">&#40;</span><span class="st0">'level_'</span><span class="sy0">+</span>level<span class="sy0">,</span> <span class="st0">'level_'</span><span class="sy0">+</span>newLevel<span class="br0">&#41;</span><span class="sy0">;</span>
        level <span class="sy0">=</span> newLevel<span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> muteVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> disabled <span class="sy0">=</span> <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    volume.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span> disabled<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>disabled<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        beforeMute <span class="sy0">=</span> volume.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        volume.<span class="me1">setValue</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
        volume.<span class="me1">setValue</span><span class="br0">&#40;</span>beforeMute<span class="br0">&#41;</span><span class="sy0">;</span>
        volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="sy0">,</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> handleInput<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Allow only numbers and various other control keys</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">keyCode</span> <span class="sy0">&gt;</span> <span class="nu0">57</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">halt</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> updateVolume<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// delay input processing to give the user time to type</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>wait<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        wait.<span class="me1">cancel</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
&nbsp;
    wait <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">400</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> value <span class="sy0">=</span> parseInt<span class="br0">&#40;</span>volInput.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span><span class="nu0">10</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="sy0">;</span>
&nbsp;
        <span class="kw1">if</span> <span class="br0">&#40;</span>value <span class="sy0">&gt;</span> <span class="nu0">100</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            volInput.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="sy0">,</span> <span class="nu0">100</span><span class="br0">&#41;</span><span class="sy0">;</span>
            value <span class="sy0">=</span> <span class="nu0">100</span>
        <span class="br0">&#125;</span>
&nbsp;
        volume.<span class="me1">setValue</span><span class="br0">&#40;</span> value <span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> showHideSlider<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    control.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'volume-hide'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw3">open</span> <span class="sy0">=</span> <span class="sy0">!</span><span class="kw3">open</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> handleDocumentClick<span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">open</span> <span class="sy0">&amp;&amp;</span> <span class="sy0">!</span>icon.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span>
            <span class="sy0">!</span>volume.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">contains</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        showHideSlider<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-38fe596180886822bfac1eb600ac6a99-plain">YUI({ filter: 'raw' }).use("slider", function (Y) {

var control    = Y.one('#volume_control'),
    volInput   = Y.one('#volume'),
    icon       = Y.one('#volume_icon'),
    mute       = Y.one('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    wait,
    volume;

// The style.top is known because of a fixed height control bar, but the
// style.left remains unknown until run time.
Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

volume = new Y.Slider({
    axis  : 'y',
    min   : 100,
    max   : 0,
    value : 50,
    length: '105px'
});

volume.renderRail = function () {
    return Y.one( "#volume_slider span.yui3-slider-rail" );
};
volume.renderThumb = function () {
    return this.rail.one( "span.yui3-slider-thumb" );
};

volume.render( "#volume_slider" );

// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);

mute.on('click', muteVolume);

volInput.on({
    keydown : handleInput,
    keyup   : updateVolume
});

icon.on('click', showHideSlider);

Y.one( 'doc' ).on('click', handleDocumentClick );

// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}

function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        volInput.set('disabled','disabled');
    } else {
        volume.setValue(beforeMute);
        volInput.set('disabled','');
    }
}

function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }
}

function updateVolume(e) {
    // delay input processing to give the user time to type
    if (wait) {
        wait.cancel();
    }

    wait = Y.later(400, null, function () {
        var value = parseInt(volInput.get('value'),10) || 0;

        if (value > 100) {
            volInput.set('value', 100);
            value = 100
        }

        volume.setValue( value );
    });
}

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (e) {
        e.preventDefault();
    }
}

function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

});</textarea></div>
<h4 id="full_css">CSS</h4>
<div id="syntax-a2fe2717fd79193b90de7b84b85e2bc6" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#999</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.demo-content</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1ex</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_control</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">repeat-x</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_control</span> label <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1ex</span> <span class="nu0">0</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    zoom<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">inset</span> <span class="re0">#999</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw1">right</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">2em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* Support open/close action for the slider */</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re0">#volume_slider</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_icon</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-25px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw1">top</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* move the button text offscreen left */</span></div></li><li class="li1"><div class="de1"><span class="re0">#volume_icon</span> p <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-indent</span><span class="sy0">:</span> <span class="re3">-9999px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;* adjust the speaker icon sprite in accordance with volume level and</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;* active state</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">*/</span></div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_0</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-25px</span><span class="sy0">;</span> <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_1</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-50px</span><span class="sy0">;</span> <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_2</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-75px</span><span class="sy0">;</span> <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_3</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-100px</span><span class="sy0">;</span> <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> .level_0<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.level_0</span><span class="re2">:hover </span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-125px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> .level_1<span class="sy0">,</span></div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.level_1</span><span class="re2">:hover </span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-150px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> .level_2<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.level_2</span><span class="re2">:hover </span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-175px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> .level_3<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.level_3</span><span class="re2">:hover </span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-200px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* rail image on the containing box rather than the rail element */</span></div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-259px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">116px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">9px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">cursor</span><span class="sy0">:</span> arrow<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-rail</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-image</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">17px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-225px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-disabled</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-242px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#demo_sprite</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re0">#demo</span> <span class="br0">&#123;</span>
    <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#999</span><span class="sy0">;</span>
    <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#demo</span> <span class="re1">.demo-content</span> <span class="br0">&#123;</span>
    <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1ex</span> <span class="re3">1em</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_control</span> <span class="br0">&#123;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
    <span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">repeat-x</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_control</span> label <span class="br0">&#123;</span>
    <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span>
    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1ex</span> <span class="nu0">0</span> <span class="re3">1em</span><span class="sy0">;</span>
    zoom<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume</span> <span class="br0">&#123;</span>
    <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">inset</span> <span class="re0">#999</span><span class="sy0">;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
    <span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
    <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span>
    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw1">right</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">2em</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* Support open/close action for the slider */</span>
<span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re0">#volume_slider</span> <span class="br0">&#123;</span>
    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_icon</span> <span class="br0">&#123;</span>
    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-25px</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw1">top</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* move the button text offscreen left */</span>
<span class="re0">#volume_icon</span> p <span class="br0">&#123;</span>
    <span class="kw1">text-indent</span><span class="sy0">:</span> <span class="re3">-9999px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/</span>
<span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_0</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-25px</span><span class="sy0">;</span> <span class="br0">&#125;</span>
<span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_1</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-50px</span><span class="sy0">;</span> <span class="br0">&#125;</span>
<span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_2</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-75px</span><span class="sy0">;</span> <span class="br0">&#125;</span>
<span class="re0">#demo</span> <span class="re1">.volume-hide</span> <span class="re1">.level_3</span> <span class="br0">&#123;</span> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-100px</span><span class="sy0">;</span> <span class="br0">&#125;</span>
&nbsp;
<span class="re0">#demo</span> .level_0<span class="sy0">,</span>
<span class="re0">#demo</span> <span class="re1">.level_0</span><span class="re2">:hover </span><span class="br0">&#123;</span>
    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-125px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re0">#demo</span> .level_1<span class="sy0">,</span>
<span class="re0">#demo</span> <span class="re1">.level_1</span><span class="re2">:hover </span><span class="br0">&#123;</span>
    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-150px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re0">#demo</span> .level_2<span class="sy0">,</span>
<span class="re0">#demo</span> <span class="re1">.level_2</span><span class="re2">:hover </span><span class="br0">&#123;</span>
    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-175px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re0">#demo</span> .level_3<span class="sy0">,</span>
<span class="re0">#demo</span> <span class="re1">.level_3</span><span class="re2">:hover </span><span class="br0">&#123;</span>
    <span class="kw1">background-position</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-200px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="br0">&#123;</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* rail image on the containing box rather than the rail element */</span>
<span class="re0">#volume_slider</span> <span class="br0">&#123;</span>
    <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">&#40;</span><span class="st0">&quot;assets/images/sprite.png&quot;</span><span class="br0">&#41;</span> <span class="kw2">no-repeat</span> <span class="nu0">0</span> <span class="re3">-259px</span><span class="sy0">;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">116px</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
    <span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">9px</span><span class="sy0">;</span>
    <span class="kw1">cursor</span><span class="sy0">:</span> arrow<span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-rail</span> <span class="br0">&#123;</span>
    <span class="kw1">background-image</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> <span class="br0">&#123;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">17px</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">31px</span><span class="sy0">;</span>
    <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-225px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#volume_slider</span> <span class="re1">.yui3-slider-disabled</span> <span class="re1">.yui3-slider-thumb</span> img <span class="br0">&#123;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">-242px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#demo_sprite</span> <span class="br0">&#123;</span>
    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span>
    <span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
    <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-a2fe2717fd79193b90de7b84b85e2bc6-plain">#demo {
    background: #fff;
    border: 1px solid #999;
    color: #000;
}

#demo .demo-content {
    padding: 1ex 1em;
}

#volume_control {
    height: 25px;
    line-height: 25px;
    background: url("assets/images/sprite.png") repeat-x 0 0;
    position: relative;
}

#volume_control label {
    font-weight: bold;
    margin: 0 1ex 0 1em;
    zoom: 1;
}

#volume {
    border: 1px inset #999;
    height: 16px;
    margin-top: 3px;
    padding: 0 3px;
    text-align: right;
    width: 2em;
}

/* Support open/close action for the slider */
#demo .volume-hide #volume_slider {
    display: none;
}

#volume_icon {
    background: url("assets/images/sprite.png") no-repeat 0 -25px;
    border: 0 none;
    height: 25px;
    vertical-align: top;
    width: 31px;
}

/* move the button text offscreen left */
#volume_icon p {
    text-indent: -9999px;
}

/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/
#demo .volume-hide .level_0 { background-position: 0 -25px; }
#demo .volume-hide .level_1 { background-position: 0 -50px; }
#demo .volume-hide .level_2 { background-position: 0 -75px; }
#demo .volume-hide .level_3 { background-position: 0 -100px; }

#demo .level_0,
#demo .level_0:hover {
    background-position: 0 -125px;
}
#demo .level_1,
#demo .level_1:hover {
    background-position: 0 -150px;
}
#demo .level_2,
#demo .level_2:hover {
    background-position: 0 -175px;
}
#demo .level_3,
#demo .level_3:hover {
    background-position: 0 -200px;
}

#volume_slider {
    position: absolute;
    top: 25px;
}

/* rail image on the containing box rather than the rail element */
#volume_slider {
    background: url("assets/images/sprite.png") no-repeat 0 -259px;
    height: 116px;
    width: 31px;
    padding-top: 9px;
    cursor: arrow;
}

#volume_slider .yui3-slider-rail {
    background-image: none;
    width: 31px;
}

#volume_slider .yui3-slider-thumb {
    height: 17px;
    width: 31px;
    overflow: hidden;
}

#volume_slider .yui3-slider-thumb img {
    position: absolute;
    top: -225px;
}

#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {
    top: -242px;
}

#demo_sprite {
    display: inline;
    float: left;
    margin-right: 1em;
}</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Slider Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../slider/slider_basic.html'>Basic Sliders</a></li><li class='selected'><a href='../slider/slider_from_markup.html'>Creating a Slider from Existing Markup</a></li><li><a href='../slider/slider_skin.html'>Alternate Skins</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a Page Theme on the Fly (included with examples for StyleSheet)</a></li><li><a href='../overlay/overlay-constrain.html'>Constrain Support (included with examples for Overlay)</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag &amp; Drop)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Slider Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/slider/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_slider.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
